<script setup>
import { onMounted } from 'vue';
import { init } from './index.js';
import { picState } from './api/use-task';
import TopBar from './components/top-bar.vue';
import LabelLayers from './components/label-layers.vue';
import LabelComments from './components/label-comments.vue';
import ToolBar from './components/tool-bar.vue';
import LabelSelector from './components/label-selector.vue';
import { labelSelectorProps } from './api/use-layer.js';
import { classes, editingLayers, labelColorMap } from './common.js';
import { delLayer } from './api/use-layer-common.js';

onMounted(init);
</script>

<template>
  <div class="base-label text-classification">
    <top-bar></top-bar>
    <tool-bar></tool-bar>
    <label-selector
      v-if="labelSelectorProps.visible"
      v-model:visible="labelSelectorProps.visible"
      :style="labelSelectorProps.style"
      @cancel="() => delLayer(editingLayers[0])"
      @ok="label => {
        editingLayers[0].label = label;
        editingLayers[0].index = classes.indexOf(label);
        editingLayers[0].color = labelColorMap[label];
        editingLayers.value = [];
      }">
    </label-selector>
    <div id="label-area">
      <p id="paragraph"></p>
    </div>
    <div class="data-bar">
      <label-layers></label-layers>
      <label-comments></label-comments>
    </div>
    <footer>
      题ID: {{ picState.curr?.fileId ?? '--' }}
    </footer>
  </div>
</template>

<style>
.base-label {
  display: grid;
  grid-template-areas:
    'header header header'
    'toolbar . databar'
    'footer footer footer';
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 60px 1fr 240px;
  overflow: hidden;
  min-width: 1440px;
  max-width: 1920px;
  height: 100%;
  user-select: none;
}

.base-label .data-bar {
  grid-area: databar;
  display: flex;
  flex-direction: column;
  background: #fff;
}

#label-area { position: relative; }

#label-area > * {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  width: 80%;
  max-width: 50em;
  margin: auto;
  font-size: 24px;
  line-height: 3;
}

#label-area > p {
  z-index: 1;
  white-space: pre-wrap;
  user-select: text;
}

.base-label > footer {
  border-top: 1px solid rgb(228,228,228);
  grid-area: footer;
}

.base-label > footer .ant-btn {
  width: 24px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
}

.base-label > footer .ant-btn svg {
  vertical-align: -.2em;
  fill: currentColor;
}

.base-label .footer-modal {
  position: absolute;
  bottom: 100%;
  padding: 6px;
  background: #fff;
  border-radius: 4px;
  color: initial;
}

.base-label .footer-modal > .pair {
  display: flex;
  align-items: center;
}
</style>
